<template>
    <div class="box">
        <van-sticky>
            <!-- 聊天室头部 -->
            <div class="chat-top">
                <router-link to="../wenlie">
                    <img src="../../assets/images/fanhui.png" alt="" class="back">
                </router-link>
                <h3>Défilé</h3>
                <img src="../../assets/images/geng.png" alt="" class="more">
            </div>
        </van-sticky>
    

        <!-- <div class="chat-nei">
            <div class="koa">214</div>
        </div> -->
        <!-- 聊天室中心内容区域 -->
        <div class="chat_cneter">
            <img src="../../assets/images/yuyin.png" alt="" class="portrait">
            <input type="text" class="entering" v-model="val"/>
            <button class="send" style="float: left;height: 35px;" @click="fa" type="primary">发送</button>
            <img src="../../assets/images/xiao.png" alt="" class="expression">
            <img src="../../assets/images/xiang.png" alt="" class="photograph">
        </div>
    </div>
</template>

<script setup lang="ts">
// const onClickLeft = () => history.back();
  import { ref } from "vue";
  const val = ref("");
  let ws = new WebSocket("http://localhost:8090");
  const fa = () => {
    ws.send(val.value);
    let p = document.createElement("DIV");
    p.innerHTML = `
    <p style='margin: 0 40px;
    padding: 10px 40px;
    border: 1px solid #00f;border-radius: 15px;'>${val.value}</p>
    <img
      src="https://ts1.cn.mm.bing.net/th?id=OIP-C.qCys2C8LjF8c3_UHbGOooAAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
      alt=""
      style="width: 50px;height: 50px; border-radius: 30px;"
    />`
    p.style.display = 'flex'
    p.style.margin = '10px 0'
    p.style.width = '90vw'
    p.style.justifyContent = 'flex-end';

    const koaElement = document.querySelector(".koa");
    if (koaElement) {
        koaElement.appendChild(p);
    } else {
        console.error("找不到.koa 元素");
    }
  };
  ws.onmessage = (e) => {
    setTimeout(() => {
        let p = document.createElement("DIV");
        p.innerHTML = `
  <img
      src='https://ts4.cn.mm.bing.net/th?id=OIP-C.PobTVuzuQy7tAZtvVEc3VQAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'
      alt=""
      style="width: 50px;height: 50px;"
    />
    <p style='margin: 0 40px;
    padding: 10px 40px;
    border: 1px solid red;border-radius: 15px;'>${e.data}</p>
    `
        p.style.display = 'flex'
        p.style.width = '90vw'
        p.style.justifyContent = 'flex-start';
        console.log(p)
        const koaElement = document.querySelector(".koa");
        if (koaElement) {
            koaElement.appendChild(p);
        } else {
            console.error("找不到.koa 元素");
        }
    }, 300)
  }

</script>

<style lang="scss" scoped>
    .box{
        width: 120%;
        height: 100%;
        margin-left: -30px;
        margin-top: -20px;
        .chat-top{
            width: 100%;
            height: 40px;
            border-bottom: solid 1px #cfcccc;
            position: relative;
            .back{
                width: 25px;
                height: 25px;
                margin: 5px 10px;
            }
            h3{
                position: absolute;
                top: 5px;
                left: 170px;
                font-weight: 600;
            }
            .more{
                width: 30px;
                height: 30px;
                position: absolute;
                right: 10px;
            }
        }
        .chat_cneter{
            width: 100%;
            height: 85vh;
            position: relative;
            .koa {
            width: 100%;
            height: 80vh;
            margin-bottom: 5px;
            border: solid 1px #000;
            // background-color: red;
            }
        }
        .fa{
            width: 372px;
            height: 50px;
            position: absolute;
            bottom: 1px;
            background-color: #e4e7e8;
            .portrait{
                width: 30px;
                height: 30px;
                position: absolute;
                left: 5px;
                top: 10px;
            }
            .entering{
                width: 210px;
                height: 30px;
                position: absolute;
                left: 40px;
                top: 10px;
                background-color: white;
                border: none;
                border-radius: 10px;
            }
            .expression{
                width: 30px;
                height: 30px;
                position: absolute;
                right: 35px;
                top: 10px;
            }
            .photograph{
                width: 25px;
                height: 25px;
                position: absolute;
                right: 5px;
                top: 13px;
            }
            .send{
                position: absolute;
                right: 67px;
                top: 10px;
                width: 50px;
                height: 30px;
                background-color: rgb(25, 224, 25);
                color: white;
                border: none;
                border-radius: 10px;
            }
        }
    }
</style>